<template>
  <div class="data-board-split">
    <div class="header">
      <h1>数据图表</h1>
    </div>

    <div class="data-tabs">
      <n-tabs v-model:value="activeTab" type="line" animated>
        <n-tab-pane name="articles" tab="文章数据">
          <div class="chart-container">
            <div ref="articleChart" class="chart"></div>
          </div>
        </n-tab-pane>

        <n-tab-pane name="disasters" tab="交易数据">
          <div class="chart-container">
            <div ref="disasterChart" class="chart"></div>
          </div>
        </n-tab-pane>

        <n-tab-pane name="articleMap" tab="文章地图分布">
          <div class="chart-container">
            <div ref="articleMapChart" class="chart map-chart"></div>
          </div>
        </n-tab-pane>

        <n-tab-pane name="disasterMap" tab="灾害地图分布">
          <div class="chart-container">
            <div ref="disasterMapChart" class="chart map-chart"></div>
          </div>
        </n-tab-pane>

        <n-tab-pane name="disasterType" tab="灾害类型">
          <div class="chart-container">
            <div ref="disasterTypeChart" class="chart"></div>
          </div>
        </n-tab-pane>

        <!-- <n-tab-pane name="userActivity" tab="用户活跃度">
          <div class="chart-container">
            <div ref="userActivityChart" class="chart"></div>
          </div>
        </n-tab-pane> -->
      </n-tabs>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue';
import * as echarts from 'echarts';
import chinaJson from './china.json'; // 调整路径
import { AdminManagementApi } from "@/api/new/AdminManagementApi"; // 导入API
import * as turf from '@turf/turf';
import { TravelNoteApi } from "@/api/new/travelNoteApi";

/**
 * 地图数据区域
 */
// 组件脚本

// 定义省份地理数据
const provinceFeatures = ref<turf.helpers.Feature<turf.helpers.MultiPolygon>[]>([]);

// 准备数据
const prepareGeoData = () => {
  provinceFeatures.value = chinaJson.features.map((feature: any) => {
    // 构造符合 GeoJSON 标准的几何对象
    const geometry: turf.helpers.MultiPolygon = {
      type: 'MultiPolygon',
      coordinates: feature.geometry.coordinates // 假设原始数据是多边形坐标
    };

    return turf.feature(geometry, feature.properties);
  });
};

const getProvinceName = (lng: number, lat: number): string | null => {
  const point = turf.point([lng, lat]);
  for (const feature of provinceFeatures.value) {
    if (turf.booleanPointInPolygon(point, feature)) {
      return feature.properties?.name || null;
    }
  }
  return null;
};

// 统计灾害数据
const provinceDisasterCount = ref<Record<string, number>>({});
// 统计文章数据
const provinceArticleCount = ref<Record<string, number>>({});
const articleOriData = ref([]);

const countDisastersByProvince = (disasters: any[]) => {
  const countMap: Record<string, number> = {};
  console.log('countDisastersByProvince测试！', disasters[0])
  disasters.forEach(disaster => {
    const province = getProvinceName(disaster.value[0], disaster.value[1]);
    if (province) {

      countMap[province] = (countMap[province] || 0) + 1;
    }
  });
  provinceDisasterCount.value = countMap;
};

const countArticlesByProvince = (articles: any[]) => {
  const countMap: Record<string, number> = {};
  console.log('countDisastersByProvince测试！', articles[0])
  articles.forEach(item => {
    console.log('！！测试内部！', item)
    const province = getProvinceName(item.longitude, item.latitude);
    if (province) {

      countMap[province] = (countMap[province] || 0) + 1;
      console.log('！！测试qqq文章成功识别！', province , countMap);
    }
  });
  provinceArticleCount.value = countMap;
}

// 灾害地图初始化
const initDisasterMapChart = () => {
  if (!disasterMapChart.value) return;
  
  const chart = echarts.init(disasterMapChart.value);
  const disasterData = props.disasterMapData || [];
  countDisastersByProvince(disasterData);
  console.log('！！echargts！', Object.entries(provinceDisasterCount.value).map(([name, value]) => ({ name, value })))

  const option = {
    // ===== 基础配置 =====
    backgroundColor: {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [{
        offset: 0, color: '#ffffff' // 顶部背景色
      }, {
        offset: 1, color: '#f9f9f9' // 底部背景色
      }]
    },
    
    title: {
      text: '全国灾害分布热力图',
      left: 'center',
      textStyle: {
        color: '#333',
        fontSize: 20,
        fontWeight: 'bold'
      },
      subtextStyle: {
        color: '#666',
        fontSize: 14
      }
    },
    
    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(255, 255, 255, 0.9)',
      borderColor: '#ddd',
      borderWidth: 1,
      textStyle: {
        color: '#333',
        fontSize: 14
      },
      formatter: (params: any) => {
        return `
        <div style="text-align: left">
          <div style="font-size: 16px; margin-bottom: 8px; border-bottom: 1px solid #eee; color: #ff7d00; font-weight: bold">${params.name}</div>
          <div style="display: flex; align-items: center">
            <span style="display: inline-block; width: 10px; height: 10px; background: ${params.color}; margin-right: 5px; border-radius: 50%"></span>
            灾害数量：<strong style="color: #333">${params.value || 0}</strong>
          </div>
        </div>
        `;
      }
    },

    // ===== 视觉映射配置 =====
    visualMap: {
      min: 0,
      left: 30,
      bottom: 30,
      text: ['高', '低'],
      textStyle: {
        color: '#666'
      },
      inRange: {
        color: ['#fff7e6', '#ffe7ba', '#ffd591', '#ffc069', '#ffa940', '#fa8c16', '#d46b08', '#ad4e00', '#873800']
      },
      calculable: true,
      hoverLink: true,
      orient: 'vertical',
      itemWidth: 12,
      itemHeight: 200
    },

    // ===== 系列配置 =====
    series: [{
      type: 'map',
      map: 'china',
      roam: true, // 开启缩放（'scale' 仅缩放，'move' 可拖动）
      zoom: 1.2,     // 初始缩放级别
      scaleLimit: {
        min: 1,      // 最小缩放级别
        max: 5       // 最大缩放级别
      },
      label: {
        show: false, // 不显示地名
        color: '#333',
        fontSize: 12,
        emphasis: {
          show: false
        }
      },
      itemStyle: {
        areaColor: '#f5f5f5',
        borderColor: '#fff',
        borderWidth: 1,
        shadowColor: 'rgba(0, 0, 0, 0.1)',
        shadowBlur: 5,
        shadowOffsetX: 0,
        shadowOffsetY: 2,
        emphasis: {
          areaColor: '#ffebdc',  // 柔和的橘色
          borderColor: '#ff9800', // 橘色边框
          borderWidth: 1.5,      // 稍微加粗边框
          shadowColor: 'rgba(255, 125, 0, 0.3)',
          shadowBlur: 10
        }
      },
      // 重要：设置高亮模式为单独高亮，不影响其他区域
      emphasis: {
        focus: 'none',  // 改为none，这样不会淡化其他区域
        itemStyle: {
          borderColor: '#ff9800', // 橘色边框
          borderWidth: 1.5,      // 稍微加粗边框
          shadowBlur: 10,
          shadowColor: 'rgba(255, 125, 0, 0.4)'
        }
      },
      // 设置非高亮区域的样式
      blur: {
        itemStyle: {
          areaColor: '#f5f5f5',
          borderColor: '#e8e8e8',  // 更浅的边框颜色
          borderWidth: 0.5,        // 边框宽度减半
          shadowBlur: 2,
          shadowColor: 'rgba(0, 0, 0, 0.03)'
        }
      },
      data: Object.entries(provinceDisasterCount.value).map(([name, value]) => ({
        name,
        value,
        // 自定义高亮样式
        emphasis: {
          itemStyle: {
            areaColor: '#ffebdc',  // 柔和的橘色
            borderColor: '#ff9800', // 橘色边框
            borderWidth: 1.5,      // 稍微加粗边框
            shadowColor: 'rgba(255, 125, 0, 0.4)'
          }
        }
      }))
    }]
  };

  chart.setOption(option);
};

// 文章数据图表初始化
const initArticleMapChart = () => {
  if (!articleMapChart.value) return;

  const chart = echarts.init(articleMapChart.value);
  const articleData = articleOriData.value;
  countArticlesByProvince(articleData)

  const option = {
    // ===== 基础配置 =====
    backgroundColor: {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [{
        offset: 0, color: '#ffffff' // 顶部背景色
      }, {
        offset: 1, color: '#f9f9f9' // 底部背景色
      }]
    },
    
    title: {
      text: '文章地区分布',
      left: 'center',
      textStyle: {
        color: '#333',
        fontSize: 20,
        fontWeight: 'bold'
      },
      subtextStyle: {
        color: '#666',
        fontSize: 14
      }
    },
    
    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(255, 255, 255, 0.9)',
      borderColor: '#ddd',
      borderWidth: 1,
      textStyle: {
        color: '#333',
        fontSize: 14
      },
      formatter: function(params) {
        return `
        <div style="text-align: left">
          <div style="font-size: 16px; margin-bottom: 8px; border-bottom: 1px solid #eee; color: #1890ff; font-weight: bold">${params.name}</div>
          <div style="display: flex; align-items: center">
            <span style="display: inline-block; width: 10px; height: 10px; background: ${params.color}; margin-right: 5px; border-radius: 50%"></span>
            文章数量：<strong style="color: #333">${params.value || 0}</strong> 篇
          </div>
        </div>
      `;
      }
    },

    // ===== 视觉映射配置 =====
    visualMap: {
      min: 0,
      left: 30,
      bottom: 30,
      text: ['高', '低'],
      textStyle: {
        color: '#666'
      },
      inRange: {
        // 使用蓝色系渐变，区分于灾害地图的橙色系
        color: ['#e6f7ff', '#bae7ff', '#91d5ff', '#69c0ff', '#40a9ff', '#1890ff', '#096dd9', '#0050b3', '#003a8c']
      },
      calculable: true,
      hoverLink: true,
      orient: 'vertical',
      itemWidth: 12,
      itemHeight: 200
    },

    // ===== 系列配置 =====
    series: [
      {
        name: '文章数量',
        type: 'map',
        map: 'china',
        roam: true,
        zoom: 1.2,
        scaleLimit: {
          min: 1,
          max: 5
        },
        label: {
          show: false,
          color: '#333',
          fontSize: 12,
          emphasis: {
            show: false
          }
        },
        itemStyle: {
          areaColor: '#f5f5f5',
          borderColor: '#fff',
          borderWidth: 1,
          shadowColor: 'rgba(0, 0, 0, 0.1)',
          shadowBlur: 5,
          shadowOffsetX: 0,
          shadowOffsetY: 2,
          emphasis: {
            areaColor: '#e6f7ff',  // 柔和的蓝色
            borderColor: '#1890ff', // 蓝色边框
            borderWidth: 1.5,      // 稍微加粗边框
            shadowColor: 'rgba(24, 144, 255, 0.3)',
            shadowBlur: 10
          }
        },
        // 重要：设置高亮模式为单独高亮，不影响其他区域
        emphasis: {
          focus: 'none',  // 改为none，这样不会淡化其他区域
          itemStyle: {
            borderColor: '#1890ff', // 蓝色边框
            borderWidth: 1.5,      // 稍微加粗边框
            shadowBlur: 10,
            shadowColor: 'rgba(24, 144, 255, 0.4)'
          }
        },
        // 设置非高亮区域的样式
        blur: {
          itemStyle: {
            areaColor: '#f5f5f5',
            borderColor: '#e8e8e8',  // 更浅的边框颜色
            borderWidth: 0.5,        // 边框宽度减半
            shadowBlur: 2,
            shadowColor: 'rgba(0, 0, 0, 0.03)'
          }
        },
        data: Object.entries(provinceArticleCount.value).map(([name, value]) => ({
          name,
          value,
          // 自定义高亮样式
          emphasis: {
            itemStyle: {
              areaColor: '#e6f7ff',  // 柔和的蓝色
              borderColor: '#1890ff', // 蓝色边框
              borderWidth: 1.5,      // 稍微加粗边框
              shadowColor: 'rgba(24, 144, 255, 0.4)'
            }
          }
        }))
      }
    ]
  };

  chart.setOption(option);
};

/**
 *
 */


// 当前选中的 tab
const activeTab = ref('articles');

// 定义props接收父组件传递的数据
const props = defineProps({
  disasterTypeData: {
    type: Array,
    default: () => []
  },
  disasterMapData: {
    type: Array,
    default: () => []
  },
  articleData: {
    type: Object,
    default: () => ({
      months: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
      values: [120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330]
    })
  },
  userActivityData: {
    type: Object,
    default: () => ({
      days: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      values: [820, 932, 901, 934, 1290, 1330, 1320]
    })
  }
});

// 图表引用
const articleChart = ref(null);
const disasterChart = ref(null);
const disasterTypeChart = ref(null);
const articleMapChart = ref(null);
const disasterMapChart = ref(null);

// 存储所有图表实例以便于统一管理
const charts: echarts.ECharts[] = [];

// 存储API获取的实际数据
const monthlyArticleData = ref({
  months: [],
  values: []
});

const monthlyTransactionData = ref({
  months: [],
  orderCounts: [],
  amounts: []
});

// 获取月度文章数据
const fetchMonthlyArticleData = async () => {
  try {
    const response = await AdminManagementApi.getMonthlyArticleCount();
    console.log('月度文章数据原始返回:', response);

    // 处理返回的数据
    if (Array.isArray(response) && response.length > 0) {
      // 提取月份和数量
      const processedData = {
        months: [],
        values: []
      };

      // 按月份排序
      const sortedData = [...response].sort((a, b) => {
        return new Date(a.month).getTime() - new Date(b.month).getTime();
      });

      // 提取数据
      sortedData.forEach(item => {
        // 格式化月份显示，例如从 "2025-04" 转为 "4月"
        const monthStr = item.month.split('-')[1].replace(/^0/, '') + '月';
        processedData.months.push(monthStr);
        processedData.values.push(item.count);
      });

      // 更新数据
      monthlyArticleData.value = processedData;
      console.log('处理后的月度文章数据:', monthlyArticleData.value);

      // 如果当前选中的是文章数据标签页，则更新图表
      if (activeTab.value === 'articles' && articleChart.value) {
        initArticleChart();
      }
    }
  } catch (error) {
    console.error('获取月度文章数据失败:', error);
  }
};

// 获取月度交易数据
const fetchMonthlyTransactionData = async () => {
  try {
    const response = await AdminManagementApi.getMonthlyTransactionTotal();
    console.log('月度交易数据原始返回:', response);

    // 处理返回的数据
    if (Array.isArray(response) && response.length > 0) {
      // 提取月份、订单数和金额
      const processedData = {
        months: [],
        orderCounts: [],
        amounts: []
      };

      // 按月份排序
      const sortedData = [...response].sort((a, b) => {
        return new Date(a.month).getTime() - new Date(b.month).getTime();
      });

      // 提取数据
      sortedData.forEach(item => {
        // 格式化月份显示，例如从 "2025-04" 转为 "4月"
        const monthStr = item.month.split('-')[1].replace(/^0/, '') + '月';
        processedData.months.push(monthStr);
        processedData.orderCounts.push(item.orderCount);
        processedData.amounts.push(item.totalAmount);
      });

      // 更新数据
      monthlyTransactionData.value = processedData;
      console.log('处理后的月度交易数据:', monthlyTransactionData.value);

      // 如果当前选中的是灾害数据标签页，则更新图表
      if (activeTab.value === 'disasters' && disasterChart.value) {
        initDisasterChart();
      }
    }
  } catch (error) {
    console.error('获取月度交易数据失败:', error);
  }
};

// 获取所有文章数据
const fetchAllTravelNoteData = async () => {
  try {
    const response = await TravelNoteApi.searchTravelNotes('',1,100000);
    articleOriData.value = response;
  }catch(error) {

  }
};

// 文章数据测试数据
const articleData = {
  months: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
  values: [120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330]
};

// 灾害数据测试数据
const disasterData = {
  months: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
  values: [20, 32, 51, 84, 120, 230, 210, 120, 110, 80, 30, 40]
};

// 灾害类型测试数据
const disasterTypeData = [
  { value: 235, name: '地震' },
  { value: 274, name: '洪水' },
  { value: 310, name: '山体滑坡' },
  { value: 335, name: '道路塌方' },
  { value: 400, name: '内涝' }
];

// 用户活跃度测试数据
const userActivityData = {
  days: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
  values: [820, 932, 901, 934, 1290, 1330, 1320]
};

// 更新文章地图分布测试数据 - 确保省份名称与地图匹配
const articleMapData = [
  { name: '北京市', value: 235 },
  { name: '上海市', value: 274 },
  { name: '广东省', value: 310 },
  { name: '浙江省', value: 335 },
  { name: '四川省', value: 278 },
  { name: '湖北省', value: 189 },
  { name: '江苏省', value: 234 },
  { name: '陕西省', value: 167 },
  { name: '山东省', value: 145 },
  { name: '重庆市', value: 210 },
  { name: '天津市', value: 123 },
  { name: '湖南省', value: 178 },
  { name: '福建省', value: 156 },
  { name: '河南省', value: 187 },
];

// 更新灾害地图分布测试数据 - 确保省份名称与地图匹配
const disasterMapData = [
  { name: '四川', value: 125 },
  { name: '云南', value: 174 },
  { name: '广东', value: 210 },
  { name: '湖南', value: 235 },
  { name: '黑龙江', value: 178 },
  { name: '新疆', value: 89 },
  { name: '浙江', value: 134 },
  { name: '陕西', value: 67 },
  { name: '江苏', value: 45 },
  { name: '重庆', value: 110 },
  { name: '河南', value: 156 },
  { name: '河北', value: 98 },
  { name: '山东', value: 123 },
  { name: '安徽', value: 87 },
  { name: '广西', value: 145 }
];

// 监听 tab 切换，重新渲染当前图表
watch(activeTab, (newTab) => {
  setTimeout(() => {
    switch(newTab) {
      case 'articles':
        initArticleChart();
        break;
      case 'disasters':
        initDisasterChart();
        break;
      case 'articleMap':
        initArticleMapChart();
        break;
      case 'disasterMap':
        initDisasterMapChart();
        break;
      case 'disasterType':
        initDisasterTypeChart();
        break;
        break;
    }
  }, 300); // 给DOM一点时间来更新
});

// 监听窗口大小变化，重新调整图表大小
window.addEventListener('resize', () => {
  charts.forEach(chart => {
    chart.resize();
  });
});

// 组件挂载时获取数据
onMounted(() => {
  // 注册中国地图
  echarts.registerMap('china', chinaJson as any);
  console.log('中国地图已注册');

  // 获取月度数据
  fetchMonthlyArticleData();
  fetchMonthlyTransactionData();
  fetchAllTravelNoteData();

  // 初始化第一个图表
  initArticleChart();
  // 初始化地图数据
  prepareGeoData();
});

// 格式化数字
const formatNumber = (num) => {
  return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,');
};

// 文章数据图表初始化
const initArticleChart = () => {
  if (!articleChart.value) return;

  // 清除旧图表
  const existingChart = charts.find(chart => (chart as any).__ecInstance && (chart as any).__ecInstance.id === 'articleChart');
  if (existingChart) {
    existingChart.dispose();
    charts.splice(charts.indexOf(existingChart), 1);
  }

  const chart = echarts.init(articleChart.value);
  (chart as any).__ecInstance = { id: 'articleChart' };
  charts.push(chart);

  // 使用API获取的实际数据，如果没有则使用默认数据
  const data = monthlyArticleData.value.months.length > 0 ?
    monthlyArticleData.value :
    props.articleData;

  const option = {
    title: {
      text: '月度文章发布量',
      left: 'center'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: data.months,
      axisLine: {
        lineStyle: {
          color: '#999'
        }
      }
    },
    yAxis: {
      type: 'value',
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      splitLine: {
        lineStyle: {
          color: '#eee'
        }
      }
    },
    series: [{
      name: '文章数量',
      type: 'bar',
      data: data.values,
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#83bff6' },
          { offset: 0.5, color: '#188df0' },
          { offset: 1, color: '#188df0' }
        ])
      },
      emphasis: {
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#2378f7' },
            { offset: 0.7, color: '#2378f7' },
            { offset: 1, color: '#83bff6' }
          ])
        }
      }
    }]
  };

  chart.setOption(option);
};

// 灾害数据图表初始化（实际显示交易数据）
const initDisasterChart = () => {
  if (!disasterChart.value) return;

  // 清除旧图表
  const existingChart = charts.find(chart => (chart as any).__ecInstance && (chart as any).__ecInstance.id === 'disasterChart');
  if (existingChart) {
    existingChart.dispose();
    charts.splice(charts.indexOf(existingChart), 1);
  }

  const chart = echarts.init(disasterChart.value);
  (chart as any).__ecInstance = { id: 'disasterChart' };
  charts.push(chart);

  // 使用API获取的实际数据，如果没有则使用默认数据
  const data = monthlyTransactionData.value.months.length > 0 ?
    monthlyTransactionData.value :
    {
      months: disasterData.months,
      orderCounts: disasterData.values,
      amounts: disasterData.values.map(v => v * 10) // 模拟金额数据
    };

  const option = {
    title: {
      text: '月度交易数据',
      left: 'center'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },
    legend: {
      data: ['订单数量', '交易金额'],
      bottom: 10
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '15%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: data.months,
      axisPointer: {
        type: 'shadow'
      }
    },
    yAxis: [
      {
        type: 'value',
        name: '订单数量',
        position: 'left',
        axisLine: {
          show: true,
          lineStyle: {
            color: '#5470c6'
          }
        }
      },
      {
        type: 'value',
        name: '交易金额',
        position: 'right',
        axisLine: {
          show: true,
          lineStyle: {
            color: '#91cc75'
          }
        }
      }
    ],
    series: [
      {
        name: '订单数量',
        type: 'bar',
        data: data.orderCounts,
        itemStyle: {
          color: '#5470c6'
        }
      },
      {
        name: '交易金额',
        type: 'line',
        yAxisIndex: 1,
        data: data.amounts,
        symbol: 'circle',
        symbolSize: 8,
        itemStyle: {
          color: '#91cc75'
        },
        lineStyle: {
          width: 3
        }
      }
    ]
  };

  chart.setOption(option);
};


// 灾害类型图表初始化
const initDisasterTypeChart = () => {
  if (!disasterTypeChart.value) return;

  // 清除旧图表
  const existingChart = charts.find(chart => (chart as any).__ecInstance && (chart as any).__ecInstance.id === 'disasterTypeChart');
  if (existingChart) {
    existingChart.dispose();
    charts.splice(charts.indexOf(existingChart), 1);
  }

  const chart = echarts.init(disasterTypeChart.value);
  (chart as any).__ecInstance = { id: 'disasterTypeChart' };
  charts.push(chart);

  // 从父组件获取灾害类型数据
  const disasterTypeData = props.disasterTypeData || [
    { value: 235, name: '山体滑坡' },
    { value: 274, name: '内涝' },
    { value: 310, name: '水体' },
    { value: 335, name: '路面塌陷' },
    { value: 400, name: '路面结冰' }
  ];

  // 自定义颜色
  const colors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4'];

  const option = {
    title: {
      text: '灾害类型分布',
      left: 'center',
      top: '5%',
      textStyle: {
        fontSize: 16
      }
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      orient: 'horizontal',
      bottom: '5%',
      left: 'center',
      itemWidth: 10,
      itemHeight: 10,
      textStyle: {
        fontSize: 12
      }
    },
    color: colors,
    series: [
      {
        name: '灾害类型',
        type: 'pie',
        radius: ['40%', '70%'],  // 内外半径，形成环形
        center: ['50%', '50%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 16,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: disasterTypeData
      }
    ]
  };

  chart.setOption(option);
};


// 模拟获取地理坐标的函数
// 实际应用中应该有一个完整的地理坐标映射表
const getGeoCoord = (name) => {
  const geoCoordMap = {
    '北京': [116.4551, 40.2539],
    '上海': [121.4648, 31.2891],
    '广州': [113.5107, 23.2196],
    '深圳': [114.5435, 22.5439],
    '成都': [104.0668, 30.5728],
    '重庆': [107.7539, 30.1904],
    '天津': [117.4219, 39.4189],
    '杭州': [120.2052, 30.2526],
    '西安': [108.9402, 34.3416],
    '武汉': [114.3896, 30.6628],
    '南京': [118.8062, 31.9208],
    '郑州': [113.4668, 34.6234],
    '长沙': [112.9351, 28.2277],
    '福州': [119.4543, 25.9222],
    '济南': [117.1582, 36.8701],
    '广东': [113.12244, 23.009505],
    '四川': [104.065735, 30.659462],
    '江苏': [118.767413, 32.041544],
    '浙江': [120.153576, 30.287459],
    '河南': [113.665412, 34.757975],
    '河北': [114.502461, 38.045474],
    '山东': [117.000923, 36.675807],
    '湖北': [114.298572, 30.584355],
    '湖南': [112.982279, 28.19409],
    '辽宁': [123.429096, 41.796767],
    '安徽': [117.283042, 31.86119],
    '黑龙江': [126.642464, 45.756967],
    '广西': [108.320004, 22.82402],
    '陕西': [108.948024, 34.263161],
    '山西': [112.549248, 37.857014],
    '新疆': [87.617733, 43.792818],
    '吉林': [125.3245, 43.886841],
    '云南': [102.712251, 25.040609],
    '贵州': [106.713478, 26.578343],
    '甘肃': [103.823557, 36.058039],
    '内蒙古': [111.670801, 40.818311],
    '江西': [115.892151, 28.676493],
    '福建': [119.306239, 26.075302],
    '海南': [110.33119, 20.031971],
    '宁夏': [106.278179, 38.46637],
    '青海': [101.778916, 36.623178],
    '西藏': [91.132212, 29.660361]
  };
  return geoCoordMap[name];
};
</script>

<style lang="less" scoped>
.data-board-split {
  width: 100%;
  padding: 20px;
  background-color: var(--n-color);
  margin-top: 20px;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;

    h1 {
      font-size: 24px;
      margin: 0;
    }
  }

  .data-tabs {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    padding: 20px;

    .chart-container {
      height: 700px;
      width: 100%;
      margin-top: 20px;

      .chart {
        height: 100%;
        width: 100%;
      }

      .map-chart {
        height: 100%;
      }
    }
  }
}
</style>


